<template>
    <div class="maincontent">
        <el-card class="box-card">
            <div class="breadcrumb" slot="header">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item >商品管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="boxtitle">
                <div class="title">
                    产品列表
                </div>
            </div>
            <div>
                <el-form :inline="true">
                    <el-form-item label="商品名称">
                        <el-input v-model="selfrom.goodsname" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="上架状态">
                        <el-select placeholder="上架状态" v-model="selfrom.state" :clearable="true">
                            <el-option v-for="(key,val) in goodstate"  :value="val" :label="key" :key="val"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核状态">
                        <el-select placeholder="审核状态" v-model="selfrom.audit" :clearable="true">
                            <el-option v-for="(key,val) in goodsaudit"  :value="val" :label="key" :key="val"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="dosearch"><i class="el-icon-search"></i>筛选</el-button>
                    </el-form-item>
                    <el-form-item style="float: right">
                        <router-link :to="{name:'添加商品'}"><el-button type="primary" ><i class="el-icon-plus"></i>添加商品</el-button></router-link>
                    </el-form-item>
                </el-form>

            </div>
            <div  v-loading="tableloading">
                <el-table :data="tableData" border >
                    <el-table-column label="图片" align="center" width="80">
                        <template scope="scope">
                            <div class="tableimg">
                                <img :src="scope.row.goods_imgs[0]" v-if="scope.row.goods_imgs.length">
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称"  align="center">
                        <template scope="scope">
                            <router-link :to="{name:'商品详情',params:{id:scope.row.goods_id}}">
                                {{scope.row.goods_name}}
                            </router-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="分类" align="center" prop="option_name">
                    </el-table-column>
                    <el-table-column label="上架状态"align="center" >
                        <template scope="scope">
                                {{goodstate[scope.row.goods_shelves]}}
                        </template>
                    </el-table-column>
                    <el-table-column label="审核状态"align="center" >
                        <template scope="scope">
                            {{goodsaudit[scope.row.goods_audit]}}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建日期" align="center">
                        <template scope="scope">
                           {{datefromate(scope.row.createtime.time)}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template scope="scope">
                            <el-button v-if="scope.row.goods_shelves==1&&scope.row.goods_audit==0" @click="shelves(scope.row)" type="text" size="small">上架</el-button>
                            <el-button  type="text" v-if="scope.row.goods_shelves==0" size="small" @click="shelves(scope.row)">下架</el-button>
                            <el-button  type="text"  v-if="scope.row.goods_audit==2||scope.row.goods_audit==1" size="small" @click="Audit(scope.row)">提交审核</el-button>
                            <!--<el-button  type="text" size="small" >删除</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <div style="text-align: right;margin-top: 10px">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="page.pageCount"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="page.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.totalCount">
                    </el-pagination>
                </div>

            </div>
        </el-card>
    </div>
</template>
<script type="text/ecmascript-6">
    import until from "../until/until";
    import API from "../API";
    import merge from "../until/merge"
    import {mapState} from 'vuex';
    export default{
        computed: {
            ...mapState({
                user: state => state.user
            })
        },
        data(){
            return{
                selfrom: {
                    goodsname:"",
                    state:"",
                    audit:""
                },
                selactionfrom:{
                    goodsname:"",
                    state:"",
                    audit:""
                },
                tableData:[],
                goodstate:until.goodstate,
                goodsaudit:until.goodsaudit,
                tableloading:false,
                page:{
                    pageSize:10,
                    pageCount:1,
                    totalCount:0
                },
                allowpagechangeaction:true
            }
        },
        mounted(){
            this.initdata();
        },
        methods:{

            initdata(){
                this.tableloading=true;
                this.allowpagechangeaction=false;
                this.selfrom=merge({},this.selfrom,this.selactionfrom);
                API.searchProjectList({
                    goodsname:this.selactionfrom.goodsname,
                    goods_shelves:this.selactionfrom.state,
                    goods_audit:this.selactionfrom.audit,
                    pageCount:this.page.pageCount,
                    pageSize:this.page.pageSize
                }).then((res)=>{
                    var json=res.data;
                    if(json.message=="success"){
                        this.tableData=json.productList;
                        this.page=json.page;

                    }else {
                        this.$message({
                            showClose: true,
                            message: '查询失败',
                            type: 'error'
                        });
                    }
                    setTimeout(()=>{
                        this.allowpagechangeaction=true;
                    },150);
                    this.tableloading=false;
                }).catch(()=>{
                    setTimeout(()=>{
                        this.allowpagechangeaction=true;
                    },150);
                    this.tableloading=false;
                })

            },
            dosearch(){
              this.selactionfrom=merge({},this.selactionfrom,this.selfrom);
                this.page.pageCount=1;
                this.initdata();
            },
            handleSizeChange(val){
                this.page.pageSize=val;
                this.initdata()
            },
            handleCurrentChange(val){
                if (this.allowpagechangeaction){
                    this.page.pageCount=val;
                    this.initdata()
                }
            },
            shelves(item){
                this.tableloading=true;
                let type=0;
                if(item.goods_shelves==0){
                    type=1;
                }
                API.updateProductShelvesByCode({
                    goods_shelves:type,
                    goods_id:item.goods_id
                }).then((res)=>{
                    this.tableloading=false;
                    let json=res.data;
                    if(json.message=="success"){
                        item.goods_shelves=type;
                        this.$notify({
                            title: '成功',
                            message: '修改成功',
                            type: 'success'
                        });
                    }else {
                        this.$notify({
                            title: '失败',
                            message: '修改失败',
                            type: 'error'
                        });
                    }
                }).catch(()=>{
                    this.tableloading=true;
                })

            },
            Audit(item){
                this.tableloading=true;
                API.updateProductAuditByCode({
                    goods_audit:3,
                    goods_id:item.goods_id
                }).then((res)=>{
                    this.tableloading=false;
                    let json=res.data;
                    if(json.message=="success"){
                        item.goods_audit=3;
                        this.$notify({
                            title: '成功',
                            message: '提交审核成功',
                            type: 'success'
                        });
                    }else {
                        this.$notify({
                            title: '失败',
                            message: '提交审核失败',
                            type: 'error'
                        });
                    }
                }).catch(()=>{
                    this.tableloading=true;
                })
            },
            datefromate(item){
                return until.dateFtt("yyyy-MM-dd hh:mm:ss",new Date(item))
            }

        }
    }

</script>
<style lang="less">
@import "../css/goodslist.less";
</style>
